<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>重复练习模式 - 渐进学习平台</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #333;
      min-height: 100vh;
      padding: 20px;
    }

    .container {
      max-width: 1000px;
      margin: 0 auto;
    }

    /* 导航栏 */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(255, 255, 255, 0.95);
      padding: 15px 30px;
      border-radius: 12px;
      margin-bottom: 30px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    .nav-brand {
      font-size: 24px;
      font-weight: bold;
      color: #764ba2;
      display: flex;
      align-items: center;
    }

    /* 重复练习主容器 */
    .repetition-engine {
      background: white;
      border-radius: 15px;
      padding: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    /* 练习头 */
    .practice-header {
      text-align: center;
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 2px solid #f0f0f0;
    }

    .practice-title {
      font-size: 28px;
      color: #333;
      margin-bottom: 10px;
    }

    .practice-subtitle {
      color: #666;
      font-size: 16px;
    }

    /* 进度追踪 */
    .progress-tracker {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 10px;
    }

    .progress-info {
      display: flex;
      gap: 30px;
    }

    .progress-item {
      text-align: center;
    }

    .progress-value {
      font-size: 24px;
      font-weight: bold;
      color: #2196F3;
      margin-bottom: 5px;
    }

    .progress-label {
      font-size: 14px;
      color: #666;
    }

    .progress-bar-container {
      flex: 1;
      max-width: 300px;
      background: #e0e0e0;
      height: 8px;
      border-radius: 4px;
      overflow: hidden;
      margin: 0 20px;
    }

    .progress-bar {
      height: 100%;
      background: linear-gradient(135deg, #4CAF50, #45a049);
      transition: width 0.3s ease;
    }

    /* 练习卡片 */
    .practice-card {
      background: white;
      border: 2px solid #e0e0e0;
      border-radius: 12px;
      padding: 25px;
      margin-bottom: 20px;
      transition: all 0.3s;
    }

    .practice-card.active {
      border-color: #2196F3;
      box-shadow: 0 5px 20px rgba(33, 150, 243, 0.15);
    }

    .practice-card.completed {
      border-color: #4CAF50;
      background: #f8fff8;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }

    .practice-number {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .number-badge {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #2196F3;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 14px;
    }

    .practice-card.completed .number-badge {
      background: #4CAF50;
    }

    .practice-type {
      background: #ff9800;
      color: white;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: bold;
    }

    /* 练习内容 */
    .practice-content {
      margin-bottom: 25px;
    }

    .practice-prompt {
      background: #f8f9fa;
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 20px;
      border-left: 4px solid #2196F3;
    }

    /* 代码编辑器 */
    .code-editor {
      border: 2px solid #e0e0e0;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 15px;
    }

    .editor-header {
      background: #2d2d2d;
      color: white;
      padding: 10px 15px;
      font-family: 'Courier New', monospace;
      font-size: 14px;
    }

    .editor-body {
      background: #1e1e1e;
      color: #f8f8f2;
      padding: 20px;
      font-family: 'Courier New', monospace;
      min-height: 200px;
      max-height: 400px;
      overflow-y: auto;
    }

    .code-line {
      margin-bottom: 8px;
      display: flex;
    }

    .line-number {
      color: #6a9955;
      margin-right: 15px;
      min-width: 40px;
      text-align: right;
      user-select: none;
    }

    .code-input {
      background: transparent;
      border: none;
      color: #f8f8f2;
      font-family: 'Courier New', monospace;
      font-size: 14px;
      width: 100%;
      outline: none;
      resize: none;
      min-height: 150px;
    }

    /* 移动端代码构建器 */
    .mobile-code-builder {
      display: none;
    }

    .code-blocks-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 15px;
    }

    .code-block {
      background: white;
      border: 2px solid #e0e0e0;
      padding: 10px 15px;
      border-radius: 6px;
      cursor: grab;
      font-family: 'Courier New', monospace;
      font-size: 14px;
      transition: all 0.2s;
    }

    .code-block:hover {
      border-color: #2196F3;
      transform: translateY(-2px);
    }

    .code-workspace {
      background: #2d2d2d;
      color: #f8f8f2;
      padding: 15px;
      border-radius: 8px;
      min-height: 200px;
      font-family: 'Courier New', monospace;
    }

    .code-slot {
      display: inline-block;
      min-width: 80px;
      height: 24px;
      border-bottom: 2px dashed #4CAF50;
      margin: 0 5px;
      vertical-align: middle;
    }

    .code-slot.filled {
      border-bottom: none;
      background: #4CAF50;
      color: white;
      padding: 2px 8px;
      border-radius: 4px;
    }

    /* 反馈区域 */
    .feedback-area {
      margin-top: 20px;
      padding: 15px;
      border-radius: 8px;
      display: none;
    }

    .feedback-area.correct {
      background: #f1f8e9;
      border: 1px solid #4CAF50;
      color: #2e7d32;
    }

    .feedback-area.incorrect {
      background: #ffebee;
      border: 1px solid #f44336;
      color: #c62828;
    }

    .feedback-title {
      font-weight: bold;
      margin-bottom: 10px;
    }

    /* 控制按钮 */
    .control-buttons {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
    }

    .control-btn {
      padding: 12px 25px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .btn-check {
      background: #2196F3;
      color: white;
    }

    .btn-next {
      background: #4CAF50;
      color: white;
    }

    .btn-skip {
      background: #ff9800;
      color: white;
    }

    .btn-check:hover, .btn-next:hover, .btn-skip:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .btn-check:disabled {
      background: #ccc;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    /* 完成统计 */
    .completion-stats {
      text-align: center;
      padding: 30px;
      background: #f8f9fa;
      border-radius: 10px;
      margin-top: 30px;
      display: none;
    }

    .completion-icon {
      font-size: 48px;
      margin-bottom: 15px;
    }

    .completion-title {
      font-size: 24px;
      color: #4CAF50;
      margin-bottom: 10px;
    }

    /* 难度调整 */
    .difficulty-adjuster {
      background: #fff3cd;
      border: 1px solid #ffc107;
      padding: 15px;
      border-radius: 8px;
      margin-top: 20px;
      display: none;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .progress-tracker {
        flex-direction: column;
        gap: 15px;
      }

      .progress-info {
        justify-content: space-around;
        width: 100%;
      }

      .progress-bar-container {
        width: 100%;
        max-width: none;
        margin: 10px 0;
      }

      .control-buttons {
        flex-direction: column;
        gap: 10px;
      }

      .control-btn {
        width: 100%;
        justify-content: center;
      }

      .mobile-code-builder {
        display: block;
      }

      .desktop-code-editor {
        display: none;
      }
    }

    @media (min-width: 769px) {
      .desktop-code-editor {
        display: block;
      }

      .mobile-code-builder {
        display: none;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <!-- 导航栏 -->
  <nav class="navbar">
    <div class="nav-brand">
      <span style="margin-right: 10px;">🔁</span> 重复练习模式
    </div>
    <div style="color: #666; font-size: 14px;">
      通过大量重复建立肌肉记忆
    </div>
  </nav>

  <!-- 重复练习引擎 -->
  <div class="repetition-engine">
    <!-- 练习头 -->
    <div class="practice-header">
      <h1 class="practice-title">Spring Bean配置 - 重复练习</h1>
      <p class="practice-subtitle">
        通过10次不同形式的重复练习，彻底掌握Spring Bean的配置方法
      </p>
    </div>

    <!-- 进度追踪 -->
    <div class="progress-tracker">
      <div class="progress-info">
        <div class="progress-item">
          <div class="progress-value" id="completedCount">0</div>
          <div class="progress-label">已完成</div>
        </div>
        <div class="progress-item">
          <div class="progress-value" id="totalCount">10</div>
          <div class="progress-label">总练习</div>
        </div>
        <div class="progress-item">
          <div class="progress-value" id="successRate">0%</div>
          <div class="progress-label">正确率</div>
        </div>
      </div>
      <div class="progress-bar-container">
        <div class="progress-bar" id="progressBar" style="width: 0%"></div>
      </div>
    </div>

    <!-- 练习卡片容器 -->
    <div id="practiceContainer">
      <!-- 练习卡片会通过JavaScript动态生成 -->
    </div>

    <!-- 控制按钮 -->
    <div class="control-buttons">
      <button class="control-btn btn-check" onclick="checkAnswer()" id="checkBtn" disabled>
        ✅ 检查答案
      </button>
      <button class="control-btn btn-next" onclick="nextPractice()" id="nextBtn" style="display: none;">
        ➡️ 下一练习
      </button>
      <button class="control-btn btn-skip" onclick="skipPractice()" id="skipBtn">
        ⏭️ 跳过此题
      </button>
    </div>

    <!-- 完成统计 -->
    <div class="completion-stats" id="completionStats">
      <div class="completion-icon">🎉</div>
      <h2 class="completion-title">重复练习完成！</h2>
      <p>你已完成所有10次练习，正确率：<strong id="finalSuccessRate">85%</strong></p>
      <p style="margin-top: 15px; color: #666;">
        肌肉记忆已建立，返回继续学习其他内容吧！
      </p>
      <button class="control-btn btn-next" onclick="returnToLearning()" style="margin-top: 20px;">
        🚀 返回学习
      </button>
    </div>

    <!-- 难度调整提示 -->
    <div class="difficulty-adjuster" id="difficultyAdjuster">
      <h4>💡 检测到练习效果不佳</h4>
      <p>系统检测到你在本知识点的正确率较低，建议：</p>
      <ul style="margin: 10px 0 10px 20px;">
        <li>增加重复练习次数到 15 次</li>
        <li>降低练习难度，从基础开始</li>
        <li>回顾相关概念后再继续</li>
      </ul>
      <button class="control-btn btn-check" onclick="adjustDifficulty()" style="background: #ff9800;">
        调整难度并继续
      </button>
    </div>
  </div>
</div>

<script>
  // 重复练习数据
  const repetitionPractice = {
    currentIndex: 0,
    totalPractices: 10,
    completed: 0,
    correct: 0,
    practices: [
      {
        id: 1,
        type: "code_recall",
        title: "Bean注解配置",
        prompt: "使用@Component注解定义一个UserService类",
        template: `@Component\npublic class UserService {\n    \n}`,
        solution: `@Component\npublic class UserService {\n    // 业务逻辑代码\n}`,
        difficulty: "easy"
      },
      {
        id: 2,
        type: "code_completion",
        title: "依赖注入配置",
        prompt: "在UserService中注入UserRepository",
        template: `@Component\npublic class UserService {\n    \n    \n}`,
        solution: `@Component\npublic class UserService {\n    @Autowired\n    private UserRepository userRepository;\n}`,
        difficulty: "easy"
      },
      {
        id: 3,
        type: "code_recall",
        title: "配置类定义",
        prompt: "创建一个Spring配置类AppConfig",
        template: ``,
        solution: `@Configuration\npublic class AppConfig {\n    \n}`,
        difficulty: "medium"
      },
      {
        id: 4,
        type: "code_completion",
        title: "Bean方法配置",
        prompt: "在AppConfig中定义DataSource Bean",
        template: `@Configuration\npublic class AppConfig {\n    \n}`,
        solution: `@Configuration\npublic class AppConfig {\n    @Bean\n    public DataSource dataSource() {\n        return new DriverManagerDataSource();\n    }\n}`,
        difficulty: "medium"
      },
      {
        id: 5,
        type: "concept_question",
        title: "概念理解",
        prompt: "Spring中@Bean和@Component注解的区别是什么？",
        options: [
          "@Bean用于方法，@Component用于类",
          "@Bean用于类，@Component用于方法",
          "两者用法完全相同",
          "@Bean只能用在配置类中"
        ],
        correctAnswer: 0,
        difficulty: "medium"
      },
      {
        id: 6,
        type: "code_correction",
        title: "代码纠错",
        prompt: "找出以下代码中的错误并修正",
        code: `@Component\npublic class UserService {\n    UserRepository userRepository;\n    \n    public UserService() {\n        userRepository = new UserRepository();\n    }\n}`,
        solution: `@Component\npublic class UserService {\n    @Autowired\n    private UserRepository userRepository;\n}`,
        difficulty: "hard"
      },
      {
        id: 7,
        type: "pattern_recognition",
        title: "模式识别",
        prompt: "以下哪种配置方式符合Spring最佳实践？",
        options: [
          "在Service中直接new Repository对象",
          "使用@Autowired进行依赖注入",
          "使用静态工厂方法创建Bean",
          "在main方法中手动组装对象"
        ],
        correctAnswer: 1,
        difficulty: "easy"
      },
      {
        id: 8,
        type: "code_recall",
        title: "条件配置",
        prompt: "使用@ConditionalOnProperty配置条件Bean",
        template: `@Configuration\npublic class FeatureConfig {\n    \n}`,
        solution: `@Configuration\npublic class FeatureConfig {\n    @Bean\n    @ConditionalOnProperty(name = "feature.enabled", havingValue = "true")\n    public FeatureService featureService() {\n        return new FeatureService();\n    }\n}`,
        difficulty: "hard"
      },
      {
        id: 9,
        type: "scenario_analysis",
        title: "场景分析",
        prompt: "在微服务架构中，如何为不同环境配置不同的DataSource？",
        options: [
          "使用@Profile注解",
          "在代码中写if-else判断",
          "为每个环境创建不同的配置类",
          "使用外部配置文件"
        ],
        correctAnswer: 0,
        difficulty: "hard"
      },
      {
        id: 10,
        type: "code_recall",
        title: "综合练习",
        prompt: "创建一个完整的用户服务配置，包含Service、Repository和配置类",
        template: ``,
        solution: `// UserRepository.java\n@Repository\npublic class UserRepository {\n    // 数据访问逻辑\n}\n\n// UserService.java\n@Service\npublic class UserService {\n    @Autowired\n    private UserRepository userRepository;\n    \n    // 业务逻辑\n}\n\n// AppConfig.java\n@Configuration\n@ComponentScan("com.example")\npublic class AppConfig {\n    // 其他Bean配置\n}`,
        difficulty: "hard"
      }
    ]
  };

  // 设备检测
  const isMobile = window.innerWidth <= 768;

  // 初始化
  document.addEventListener('DOMContentLoaded', function() {
    loadCurrentPractice();
    updateProgress();
  });

  // 加载当前练习
  function loadCurrentPractice() {
    const container = document.getElementById('practiceContainer');
    const practice = repetitionPractice.practices[repetitionPractice.currentIndex];

    container.innerHTML = createPracticeCard(practice);

    // 启用检查按钮
    document.getElementById('checkBtn').disabled = false;
    document.getElementById('nextBtn').style.display = 'none';
  }

  // 创建练习卡片
  function createPracticeCard(practice) {
    let content = '';

    switch (practice.type) {
      case 'code_recall':
      case 'code_completion':
      case 'code_correction':
        content = createCodingPractice(practice);
        break;
      case 'concept_question':
      case 'pattern_recognition':
      case 'scenario_analysis':
        content = createConceptPractice(practice);
        break;
    }

    return `
                <div class="practice-card active" id="practiceCard">
                    <div class="card-header">
                        <div class="practice-number">
                            <div class="number-badge">${practice.id}</div>
                            <h3>${practice.title}</h3>
                        </div>
                        <div class="practice-type">${getPracticeTypeName(practice.type)}</div>
                    </div>

                    <div class="practice-content">
                        <div class="practice-prompt">
                            <strong>练习要求：</strong> ${practice.prompt}
                        </div>
                        ${content}
                    </div>

                    <div class="feedback-area" id="feedbackArea"></div>
                </div>
            `;
  }

  // 创建编码练习
  function createCodingPractice(practice) {
    if (isMobile) {
      return createMobileCodingPractice(practice);
    } else {
      return createDesktopCodingPractice(practice);
    }
  }

  // 创建桌面端编码练习
  function createDesktopCodingPractice(practice) {
    return `
                <div class="desktop-code-editor">
                    <div class="code-editor">
                        <div class="editor-header">
                            ${practice.title}.java
                        </div>
                        <div class="editor-body">
                            <textarea class="code-input" id="codeInput" placeholder="在这里编写代码..." oninput="enableCheckButton()">${practice.template || ''}</textarea>
                        </div>
                    </div>
                </div>
            `;
  }

  // 创建移动端编码练习
  function createMobileCodingPractice(practice) {
    let codeBlocks = [];

    if (practice.type === 'code_completion') {
      codeBlocks = [
        '@Autowired',
        'private UserRepository userRepository;',
        'public UserService() {',
        'return new UserRepository();'
      ];
    } else if (practice.type === 'code_recall') {
      codeBlocks = [
        '@Component',
        'public class UserService',
        '{',
        '}',
        '@Autowired',
        'private UserRepository userRepository;'
      ];
    }

    return `
                <div class="mobile-code-builder">
                    <div class="code-blocks-container">
                        ${codeBlocks.map(block =>
            `<div class="code-block" draggable="true" data-code="${block}">${block}</div>`
    ).join('')}
                    </div>

                    <div class="code-workspace" id="codeWorkspace">
                        <div class="code-line">
                            <span class="line-number">1</span>
                            <span>// 拖拽代码块到这里构建代码</span>
                        </div>
                    </div>
                </div>
            `;
  }

  // 创建概念练习
  function createConceptPractice(practice) {
    return `
                <div class="concept-practice">
                    <div class="options-container">
                        ${practice.options.map((option, index) => `
                            <div class="option-item" onclick="selectOption(${index})">
                                <input type="radio" name="conceptOption" id="option${index}" value="${index}">
                                <label for="option${index}">${option}</label>
                            </div>
                        `).join('')}
                    </div>
                </div>
                <style>
                    .options-container {
                        display: flex;
                        flex-direction: column;
                        gap: 10px;
                    }
                    .option-item {
                        padding: 15px;
                        border: 2px solid #e0e0e0;
                        border-radius: 8px;
                        cursor: pointer;
                        transition: all 0.2s;
                    }
                    .option-item:hover {
                        border-color: #2196F3;
                        background: #f0f8ff;
                    }
                    .option-item.selected {
                        border-color: #2196F3;
                        background: #e3f2fd;
                    }
                    .option-item input {
                        margin-right: 10px;
                    }
                </style>
            `;
  }

  // 获取练习类型名称
  function getPracticeTypeName(type) {
    const typeMap = {
      'code_recall': '代码默写',
      'code_completion': '代码填空',
      'code_correction': '代码纠错',
      'concept_question': '概念问答',
      'pattern_recognition': '模式识别',
      'scenario_analysis': '场景分析'
    };
    return typeMap[type] || '练习';
  }

  // 启用检查按钮
  function enableCheckButton() {
    document.getElementById('checkBtn').disabled = false;
  }

  // 选择选项
  function selectOption(index) {
    document.querySelectorAll('.option-item').forEach(item => {
      item.classList.remove('selected');
    });
    event.currentTarget.classList.add('selected');
    document.getElementById('checkBtn').disabled = false;
  }

  // 检查答案
  function checkAnswer() {
    const practice = repetitionPractice.practices[repetitionPractice.currentIndex];
    const feedbackArea = document.getElementById('feedbackArea');
    let isCorrect = false;

    switch (practice.type) {
      case 'code_recall':
      case 'code_completion':
      case 'code_correction':
        isCorrect = checkCodeAnswer(practice);
        break;
      case 'concept_question':
      case 'pattern_recognition':
      case 'scenario_analysis':
        isCorrect = checkConceptAnswer(practice);
        break;
    }

    // 更新统计
    repetitionPractice.completed++;
    if (isCorrect) {
      repetitionPractice.correct++;
      feedbackArea.className = 'feedback-area correct';
      feedbackArea.innerHTML = `
                    <div class="feedback-title">✅ 回答正确！</div>
                    <p>很好！你掌握了这个知识点。</p>
                `;
    } else {
      feedbackArea.className = 'feedback-area incorrect';
      feedbackArea.innerHTML = `
                    <div class="feedback-title">❌ 需要改进</div>
                    <p><strong>参考答案：</strong></p>
                    <pre style="background: white; padding: 10px; border-radius: 4px; margin-top: 10px;">${practice.solution}</pre>
                `;
    }

    feedbackArea.style.display = 'block';
    document.getElementById('checkBtn').style.display = 'none';
    document.getElementById('nextBtn').style.display = 'block';

    // 标记练习卡为完成
    document.getElementById('practiceCard').classList.add('completed');

    updateProgress();
  }

  // 检查代码答案
  function checkCodeAnswer(practice) {
    if (isMobile) {
      // 移动端简单检查
      return Math.random() > 0.3; // 模拟70%正确率
    } else {
      const userCode = document.getElementById('codeInput').value;
      // 简单关键词检查
      const requiredKeywords = practice.solution.split('\n')
              .filter(line => line.trim() && !line.trim().startsWith('//'))
              .map(line => line.trim().split(' ')[0])
              .filter(keyword => keyword && !['{', '}', '//'].includes(keyword));

      return requiredKeywords.some(keyword => userCode.includes(keyword));
    }
  }

  // 检查概念答案
  function checkConceptAnswer(practice) {
    const selectedOption = document.querySelector('input[name="conceptOption"]:checked');
    return selectedOption && parseInt(selectedOption.value) === practice.correctAnswer;
  }

  // 下一练习
  function nextPractice() {
    repetitionPractice.currentIndex++;

    if (repetitionPractice.currentIndex < repetitionPractice.totalPractices) {
      loadCurrentPractice();
    } else {
      showCompletion();
    }
  }

  // 跳过练习
  function skipPractice() {
    repetitionPractice.completed++;
    repetitionPractice.currentIndex++;

    if (repetitionPractice.currentIndex < repetitionPractice.totalPractices) {
      loadCurrentPractice();
    } else {
      showCompletion();
    }

    updateProgress();
  }

  // 更新进度
  function updateProgress() {
    const progress = (repetitionPractice.completed / repetitionPractice.totalPractices) * 100;
    const successRate = repetitionPractice.completed > 0 ?
            Math.round((repetitionPractice.correct / repetitionPractice.completed) * 100) : 0;

    document.getElementById('progressBar').style.width = `${progress}%`;
    document.getElementById('completedCount').textContent = repetitionPractice.completed;
    document.getElementById('successRate').textContent = `${successRate}%`;

    // 如果正确率低于60%，显示难度调整提示
    if (repetitionPractice.completed >= 3 && successRate < 60) {
      document.getElementById('difficultyAdjuster').style.display = 'block';
    }
  }

  // 显示完成统计
  function showCompletion() {
    document.getElementById('practiceContainer').style.display = 'none';
    document.getElementById('checkBtn').style.display = 'none';
    document.getElementById('nextBtn').style.display = 'none';
    document.getElementById('skipBtn').style.display = 'none';

    const successRate = Math.round((repetitionPractice.correct / repetitionPractice.completed) * 100);
    document.getElementById('finalSuccessRate').textContent = `${successRate}%`;
    document.getElementById('completionStats').style.display = 'block';
  }

  // 调整难度
  function adjustDifficulty() {
    // 增加练习次数
    repetitionPractice.totalPractices = 15;
    document.getElementById('totalCount').textContent = '15';
    document.getElementById('difficultyAdjuster').style.display = 'none';

    alert('已调整难度！将继续进行额外5次基础练习。');
  }

  // 返回学习
  function returnToLearning() {
    window.location.href = '/learning/engine'; // 返回学习引擎
  }

  // 移动端代码拖拽功能
  function allowDrop(event) {
    event.preventDefault();
  }

  function dragCode(event) {
    event.dataTransfer.setData("text", event.target.getAttribute('data-code'));
  }

  function dropCode(event) {
    event.preventDefault();
    const code = event.dataTransfer.getData("text");
    const slot = event.target;

    if (slot.classList.contains('code-slot')) {
      slot.textContent = code;
      slot.className = "code-slot filled";
      document.getElementById('checkBtn').disabled = false;
    }
  }

  // 初始化拖拽
  document.addEventListener('DOMContentLoaded', function() {
    const codeBlocks = document.querySelectorAll('.code-block');
    codeBlocks.forEach(block => {
      block.addEventListener('dragstart', dragCode);
    });
  });
</script>
</body>
</html>